<template>
  <CustomPageLayout>
    <template #top>
      <LabelSearch label="精选园区" :search-str.sync="params.name" />
    </template>

    <template #center>
      <ParkFilters :checked.sync="params.filters" />
    </template>

    <template #bottomLeft>
      <LabelCountSort :count="total">
        <template #sort>
          <ListSortGroup :data-list="sortData" :sort.sync="params.sort" />
        </template>

        <template #viewMode>
          <ViewMode @onChange="(mode) => (currentMode = mode)" />
        </template>
      </LabelCountSort>
      <ParkList :data-list="parkList" :loading="loading" :mode="currentMode" />
    </template>

    <template #pagination>
      <Pagination
        :total="total"
        :page-size="params.pageInfo.pageSize"
        :current-page="params.pageInfo.pageNum"
        @current-change="handlePageNum"
      />
    </template>
  </CustomPageLayout>
</template>

<script lang="ts">
import Vue from 'vue'
// import { parkDataList } from '@/pages/park/mockData'
import CustomPageLayout from '@/components/portal/CustomPageLayout.vue'
import LabelSearch from '@/components/portal/LabelSearch.vue'
import ParkFilters from '@/components/portal/park/ParkFilters.vue'
import ParkList from '@/components/portal/park/ParkList.vue'
import LabelCountSort from '@/components/portal/LabelCountSort.vue'
import ListSortGroup from '@/components/portal/ListSortGroup.vue'
import Pagination from '@/components/portal/Pagination.vue'
import ViewMode from '@/components/portal/ViewMode.vue'
import { ActionsType as TreeActionsType } from '@/actions/tree'
import { ActionsType as DictActionsType } from '@/actions/dict'
import { getParkPageList } from '@/api/park'
export default Vue.extend({
  components: {
    CustomPageLayout,
    LabelSearch,
    ParkFilters,
    ParkList,
    LabelCountSort,
    ListSortGroup,
    Pagination,
    ViewMode,
  },
  async asyncData({ store }) {
    // await store.dispatch(TreeActionsType.getArea)
    // await store.dispatch(TreeActionsType.getIndustryTag)
    await store.dispatch(DictActionsType.getCodes, [
      'park_type',
      'park_level',
      'park_economic_type',
    ])

    const result = await getParkPageList({
      sort: { 'data.sort': -1 },
      pageInfo: {
        pageNum: 1,
        pageSize: 12,
      },
    })
    console.log(result)

    return {
      parkList: result.list,
      total: result.total,
      loading: false,
    }
  },
  data() {
    return {
      currentMode: 'card',
      loading: true,
      total: 0,
      sortData: [
        {
          label: '规划面积',
          sort: -1,
          key: 'planArea',
        },
      ],
      params: {
        pageInfo: {
          pageNum: 1,
          pageSize: 12,
        },
        name: '',
        filters: [],
        sort: {},
      },
      parkList: [],
    }
  },
  head: {
    title: '查园区',
  },
  watch: {
    'params.name'(val) {
      console.log('park_name', val)
      this.fetchData()
    },
    'params.filters'(val) {
      console.log('park_filter', val)
      this.fetchData()
    },
    'params.sort'(val) {
      console.log('park_sort', val)
      this.fetchData()
    },
    'params.pageInfo.pageNum'() {
      this.fetchData()
    },
  },
  created() {
    console.log('created')

    // this.$store.dispatch(TreeActionsType.getArea)
    this.$store.dispatch(TreeActionsType.getCQArea)
    this.$store.dispatch(TreeActionsType.getIndustryTag)
  },
  mounted() {
    // setTimeout(() => {
    //   this.parkList = parkDataList
    //   this.loading = false
    // }, 2000)
  },
  methods: {
    async fetchData() {
      const {
        pageInfo: { pageNum },
        filters,
        name,
        sort,
      } = this.params

      const params = {
        conditions: {},
        sort: { 'data.sort': -1 },
        pageInfo: {
          pageNum,
          pageSize: 12,
        },
      }

      filters.forEach((d) => {
        params.conditions[`data.${d.key}`] = d.checked[0].value

        console.log(d)
      })

      if (name) {
        params.conditions[`data.name`] = { $regex: name }
      }

      if (sort) {
        params.sort = { [`data.${sort.key}`]: sort.sort }
      }

      this.loading = true
      const result = await getParkPageList(params)
      this.parkList = result.list
      this.total = result.total
      this.loading = false
    },
    handlePageNum(val) {
      this.params.pageInfo.pageNum = val
    },
  },
})
</script>
<style lang="scss" scoped></style>
